import React, { FC, useState } from 'react'
import { useDispatch } from 'react-redux'
import useGetComponentsInfo from '../../../hooks/useGetComponentInfo'
import { ComponentPropsType, getComponentConfByType } from '../../../components/QuestionComponents'
import { changeComponentProps } from '../../../store/componentsReducer'

const NoProp: FC = () => {
  return <div style={{ textAlign: 'center' }}>未选中组件</div>
}
const ComponentProp: FC = () => {
  const dispatch = useDispatch()

  // 获取组件信息 选中的组件
  const { selectComponent } = useGetComponentsInfo()
  if (selectComponent == null) return <NoProp />
  const { type, props, isLocked, isHidden } = selectComponent
  const componentConf = getComponentConfByType(type)
  if (componentConf === null) return <NoProp />

  // 当数据改变时
  function onChangeProps(newProps: ComponentPropsType) {
    if (selectComponent == null) return
    const { fe_id } = selectComponent
    dispatch(changeComponentProps({ fe_id, newProps }))
  }
  const { PropComponent } = componentConf
  console.log(props)
  return <PropComponent {...props} onChange={onChangeProps} disabled={isLocked || isHidden} />
}

export default ComponentProp
